<template>
  <div class="content-block">
      <div class="content-main">
        <div class="content-title">
          <div class="title-text-dot">用户列表</div>
          <div class="title-handle">
            <div class="handel-item">
              <el-button type="primary" size="mini" @click="handleAdd">新 增</el-button>
            </div>
            <div class="handel-item">
              <el-button type="primary" size="mini" @click="handleSearch">查 询</el-button>
            </div>
            <div class="handel-item">
              <el-input v-model="searchForm.username" size="mini" type="text" placeholder="用户名"></el-input>
            </div>
            <div class="handel-item">
              <el-input v-model="searchForm.mobile" size="mini" type="text" placeholder="手机号"></el-input>
            </div>
            <div class="handel-item">
              <el-input v-model="searchForm.name" size="mini" type="text" placeholder="用户真实姓名"></el-input>
            </div>
            <div class="handel-item">
             <el-select v-model="searchForm.status" placeholder="用户状态" style="width:90%;float: right">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            </div>
             <div class="handel-item">
             <el-select v-model="searchForm.userRole" placeholder="用户身份" style="width:90%;float: right">
              <el-option
                v-for="item in optionsUserRole"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            </div>
          </div>
        </div>
        <el-table
          :data="userList"
          border
          size="mini"
          height="calc(100vh - 230px)"
          v-loading="tableLoading"
          style="width: 100%"
        >
          <el-table-column type="index" label="序号" :index="indexMethod" align="center" width="50"></el-table-column>
          <el-table-column label="用户名" prop="username"></el-table-column>
          <el-table-column label="姓名" prop="name"></el-table-column>
          <el-table-column label="手机号" prop="mobile"></el-table-column>
          <el-table-column label="邮箱" prop="email"></el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                title="编辑"
                class="text-blue"
                @click="handleEdit(scope.row)"
              >编辑</el-button>
              <el-button
                size="mini"
                type="text"
                title="重置密码"
                class="text-orange"
                @click="resetPwd(scope.row)"
              >重置密码</el-button>
              <el-button
                size="mini"
                type="text"
                title="删除"
                class="text-red"
                @click="handleDelete(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-size="pageSize"
          :page-sizes="[5, 10, 20, 50]"
          layout="total, sizes, prev, pager, next"
          :total="total"
        ></el-pagination>
        <!--操作弹窗-->
        <el-dialog
          :close-on-click-modal="false"
          :title="handleTitle"
          :visible.sync="handleVisible"
          width="35%"
          center
        >
          <el-form
            ref="userForm"
            :model="userForm"
            :rules="userFormRule"
            status-icon
            label-width="90px"
            size="small"
          >
            <el-form-item label="用户名" prop="username">
              <el-row>
                <el-col :span="24">
                  <el-input v-model.trim="userForm.username" type="text"></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-row>
                <el-col :span="24">
                  <el-input v-model.trim="userForm.name" type="text"></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
              <el-row>
                <el-col :span="24">
                  <el-input v-model.trim="userForm.mobile" type="text"></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-row>
                <el-col :span="24">
                  <el-input v-model.trim="userForm.email" type="text"></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="密码" prop="password" v-if="handleTitle==='新增用户'">
              <el-row>
                <el-col :span="24">
                  <el-input v-model.trim="userForm.password" type="password"></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="角色">
              <el-row>
                <el-col :span="24">
                  <el-select
                    v-model="userForm.roleIds"
                    filterable
                    multiple
                    clearable
                    placeholder="请选择角色"
                  >
                    <el-option
                      v-for="item in roleDownList"
                      :key="item.roleId"
                      :label="item.roleName"
                      :value="item.roleId"
                    ></el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="handleVisible=false" size="mini">取 消</el-button>
            <el-button type="primary" @click="handleSave" size="mini">保 存</el-button>
          </div>
        </el-dialog>
        <!-- 删除弹窗 -->
        <el-dialog
          :close-on-click-modal="false"
          title="删除用户"
          :visible.sync="delVisible"
          width="260px"
          center
        >
          <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
          <span slot="footer" class="dialog-footer">
            <el-button size="mini" @click="delVisible = false">取 消</el-button>
            <el-button size="mini" type="danger" @click="deleteRow">确 定</el-button>
          </span>
        </el-dialog>
        <!--操作弹窗-->
        <el-dialog
          :close-on-click-modal="false"
          :title="modTitle"
          :visible.sync="modVisible"
          width="30%"
          center
        >
          <el-form
            ref="modForm"
            :model="modForm"
            :rules="modFormRule"
            status-icon
            label-width="90px"
            size="small"
          >
            <el-form-item label="旧密码" prop="pwd_old" v-if="modTitle==='修改密码'">
              <el-row>
                <el-col :span="24">
                  <el-input v-model.trim="modForm.pwd_old" type="password"></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="新密码" prop="pwd_new">
              <el-row>
                <el-col :span="24">
                  <el-input v-model.trim="modForm.pwd_new" type="password"></el-input>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="modVisible=false" size="mini">取 消</el-button>
            <el-button type="primary" @click="handleMod" size="mini">确 定</el-button>
          </div>
        </el-dialog>
      </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import TreeSelect from "@riophae/vue-treeselect";
// import the styles
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  components: {
    TreeSelect
  },
  data() {
    const vm = this;
    let checkName = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("用户名不为空"));
      } else if (!vm.specialStr(value)) {
        return callback(new Error("请勿输入#%&?"));
      } else {
        callback();
      }
    };
    let checkPass = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("密码不为空"));
      } else if (!vm.specialStr(value)) {
        return callback(new Error("请勿输入#%&?"));
      } else {
        callback();
      }
    };
    let valPhone = (rule, value, callback) => {
      if (value) {
        if (!vm.regExpPhone(value)) {
          callback(new Error("电话号码不合法"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    let valEmail = (rule, value, callback) => {
      if (value) {
        if (!vm.regExpEmail(value)) {
          return callback(new Error("邮箱格式不正确"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    return {
      current: 1,
      pageSize: 10,
      total: 0,
      userId: "",
      searchForm:{
        mobile: "",
        name: "",
        status: "",
        userRole: "",
        username: "",

      },
      searchForm: {
        mobile: "",
        name: "",
        status: "",
        userRole: "",
        username: "",
      },
        options: [{
          value: '0',
          label: '禁用'
        }, {
          value: '1',
          label: '正常'
        }],
        optionsUserRole:[{
          value: '0',
          label: '普通'
        },{
          value: '1',
          label: '企业'
        },{
          value: '2',
          label: '平台'
        },
        ],
      tableLoading: false,
      handleTitle: "",
      handleVisible: false,
      delVisible: false,
      modVisible: false,
      pmsShow: false,
      modTitle: "",
      userForm: {
        deptId: null,
        email: "",
        mobile: "",
        name: "",
        password: "",
        username: "",
        roleIds: []
      },
      userFormRule: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        username: [{ required: true, validator: checkName, trigger: "blur" }],
        password: [{ required: true, validator: checkPass, trigger: "blur" }],
        email: [{ required: false, validator: valEmail, trigger: "blur" }],
        mobile: [{ required: false, validator: valPhone, trigger: "blur" }],
      },
      modForm: {
        pwd_new: "",
        pwd_old: "",
        user_id: ""
      },
      modFormRule: {
        pwd_new: [{ required: true, message: "请输入新密码", trigger: "blur" }],
        pwd_old: [{ required: true, message: "请输入旧密码", trigger: "blur" }]
      }
    };
  },
  computed: {
    ...mapState({
      userList: state => state.userManage.userList,
      roleDownList: state => state.roleManage.roleDownList,
    })
  },
  mounted() {
    this.getData();
  },
  methods: {
    ...mapActions("roleManage", ["getRoleDown"]),
    ...mapActions("userManage", [
      "getUserList",
      "addUser",
      "editUser",
      "removeUser",
      "modPassword",
      "resetPassword",
      "addDataPms",
      "getUserDataIds"
    ]),
    indexMethod(index) {
      return (this.current - 1) * this.pageSize + 1 + index;
    },
    getData() {
      this.tableLoading = true;
      this.getUserList(this);
      this.getRoleDown(this);
    },
    resetForm() {
      const vm = this;
      vm.userForm = {
        deptId: null,
        email: "",
        mobile: "",
        name: "",
        password: "",
        username: "",
        roleIds: []
      };
      vm.$nextTick(() => {
        vm.$refs.userForm.clearValidate();
      });
    },
    resetModForm() {
      const vm = this;
      vm.modForm = {
        pwd_new: "",
        pwd_old: "",
        user_id: ""
      };
      vm.$nextTick(() => {
        vm.$refs.modForm.clearValidate();
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getData();
    },
    handleSearch() {
      this.current = 1;
      this.getData();
    },
    handleAdd() {
      const vm = this;
      vm.resetForm();
      vm.handleVisible = true;
      vm.handleTitle = "新增用户";
    },
    handleEdit(row) {
      const vm = this;
      vm.resetForm();
      vm.handleVisible = true;
      vm.handleTitle = "编辑用户";
      vm.userForm = {
        userId: row.userId,
        deptId: row.deptId,
        email: row.email,
        mobile: row.mobile,
        name: row.name,
        username: row.username,
        roleIds: row.roleIds || []
      };
    },
    handleDelete(row) {
      this.userId = row.userId;
      this.delVisible = true;
    },
    deleteRow() {
      this.removeUser(this);
    },
    handleSave() {
      const vm = this;
      vm.$refs["userForm"].validate(valid => {
        if (valid) {
          if (vm.handleTitle === "新增用户") {
            vm.addUser(vm);
          } else {
            vm.editUser(vm);
          }
        } else {
          return false;
        }
      });
    },
    resetPwd(row) {
      this.resetModForm();
      this.modForm.user_id = row.userId;
      this.modVisible = true;
      this.modTitle = "重置密码";
    },
    handleMod() {
      const vm = this;
      vm.$refs["modForm"].validate(valid => {
        if (valid) {
          if (vm.modTitle === "修改密码") {
            vm.modPassword(vm);
          } else {
            vm.resetPassword(vm);
          }
        } else {
          return false;
        }
      });
    }
  }
};
</script>
